<template>
  <div class="desktop">
    <ContextMenu class="container" :menus="menus" :dividers="[2]">
      <ContextMenuTarget
        v-for="item in favorateList"
        @select="(menu) => handleContextMenuSelect(menu, item)"
      >
        <div class="card" ref="cardRefs">
          <img :src="item.icon" class="icon" />
          <el-text class="name" size="large" truncated>{{ item.name }}</el-text>
        </div>
      </ContextMenuTarget>
    </ContextMenu>
  </div>
</template>
<script setup>
import { ref } from "vue";

const icon =
  "";
const favorateList = ref([
  {
    path: "C:\\Users\\Administrator\\Desktop\\1.txt",
    name: "1.txt123123131212312312",
    icon: icon,
  },
  {
    path: "C:\\Users\\Administrator\\Desktop\\2.txt",
    name: "2.txt",
    icon: icon,
  },
  {
    path: "C:\\Users\\Administrator\\Desktop\\3.txt",
    name: "3.txt",
    icon: icon,
  },
  {
    path: "C:\\Users\\Administrator\\Desktop\\4.txt",
    name: "4.txt",
    icon: icon,
  },
  {
    path: "C:\\Users\\Administrator\\Desktop\\5.txt",
    name: "5.txt",
    icon: icon,
  },
  {
    path: "C:\\Users\\Administrator\\Desktop\\6.txt",
    name: "6.txt",
    icon: icon,
  },
  {
    path: "C:\\Users\\Administrator\\Desktop\\7.txt",
    name: "7.txt",
    icon: icon,
  },
]);

// 右键菜单配置
const menus = ref([
  { label: "复制路径/网址" },
  { label: "编辑" },
  { label: "打开" },
  { label: "删除" },
]);

const handleContextMenuSelect = (menu, favorateItem) => {
  console.log("选中卡片ID:", favorateItem, "执行操作:", menu);
};

// 复制路径或网址
const handleCopyPathOrUrl = () => {
  console.log("复制路径或网址");
};
// 编辑
const handleEdit = () => {
  console.log("编辑");
};
// 打开
const handleOpen = () => {
  console.log("打开");
};
// 删除
const handleDelete = () => {
  console.log("删除");
};
</script>
<style scoped lang="scss">
.desktop {
  margin-top: 64px;
  background-color: var(--utools-background-color);

  .container {
    display: grid;
    /* 计算最小列宽 = 卡片宽度 + 水平间距 */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    /* 垂直间距固定40px（上下卡片间隔） */
    row-gap: 20px;
    /* 水平间距最小40px */
    column-gap: 20px;
    /* 水平方向：卡片在单元格内居中 */
    justify-items: center;
    /* 左右留出缓冲空间，避免边缘卡片贴边 */
    padding: 20px 20px 0 20px;

    .card {
      width: 120px;
      height: 120px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
      border: 2px solid transparent; /* 添加透明边框作为基础 */
      user-select: none; /* 禁用鼠标选择 */
      cursor: pointer;

      &:hover {
        border: 2px solid rgba($color: #000000, $alpha: 0.3); /* 悬浮时显示蓝色边框 */
      }

      .icon {
        display: block;
        margin: 0 auto;
        margin-top: 20px;
      }
      .name {
        position: absolute;
        bottom: 20px;
        width: 100%;
        padding: 0 20px;
        text-align: center;
      }
    }
  }

  .context-menu {
    .context-menu-item {
      position: absolute;
      width: 180px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      padding: 5px 0;
      display: none; /* 默认隐藏 */
      z-index: 1000;

      &.active {
        display: block; /* 激活时显示 */
      }

      .context-menu-item {
        padding: 8px 15px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f0f0f0;
        }
      }

      .context-menu-divider {
        height: 1px;
        background-color: #e0e0e0;
        margin: 5px 0;
      }
    }
  }
}
</style>
